<template>
  <div
    v-if="isConnectorCard(card)" 
    class="setting-card-connector-tag-container"
  >
    <el-tag 
      type="info"
      effect="plain"
      class="setting-card-connector-tag"
    >
      {{ $t('common.form.type.connector') }}
    </el-tag>
  </div>
</template>

<script>
/* service */
import { isConnectorCard } from '@service/CardService';

export default {
  name: 'SettingConnectorTag',
  props: {
    card: {
      type: Object,
      required: true
    }
  },
  methods: {
    isConnectorCard
  }
}
</script>

<style lang="scss">
.setting-card-connector-tag-container {
  max-width: 76px;
  padding: 0 10px;
  display: flex;
  align-content: center;
  justify-content: center;
}
.setting-card-connector-tag {
  border-color: #8c8c8c !important;
  color: #8c8c8c !important;
  min-width: 56px;
  max-width: 56px;
}
</style>